<style lang="less" scoped>
.flex-row{
  display: flex;
  justify-content: flex-start;
}
.index {
  background: #f8f8f9;
}
.loading {
  animation: myloading 1s linear infinite;
  margin-top: 100px;
}
@keyframes myloading {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.question_list {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.ques_content {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.xuanxiang {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.card_row {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.edit_out {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-left: 20px;
}
.left {
  text-align: left;
}

.overview {
  width: 1000px;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
  margin-top: 20px;
  margin-bottom: 20px;

}
.my_answer {
  font-weight: bold;
}
.answer {
  font-weight: bold;
  margin-left: -26px;
}

.column {
  display: flex;
  flex-direction: column;
}

.right_no {
  margin-right: -750px;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
</style>

<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    <Layout  style="margin-top: 60px;background-color: white" id="content">
      <Layout :style="{padding: '0 24px 24px','min-width': '1210px',margin: '0 auto','background-color': 'white'}">
        
        <div class="question_list">
          <div class="overview">作业回顾</div>
          <div v-for="(ques,index) in homework_point" class="card_row">
            <Card style="width:1000px;margin-bottom: 20px">
              <div class="ques_content">
                <div class="left" v-html="ques.question"></div>
                <Divider />
                <div v-if="ques.type === 'panduan'">
                  <div class="column">
                    <div class="my_answer">我的答案：</div>
                    <div>
                      <p v-if="ques.stu_answer[0] === 'yes'">正确</p>
                      <p v-if="ques.stu_answer[0] === 'no'">错误</p>
                      <el-button
                        type="success"
                        icon="el-icon-check"
                        circle
                        size="mini"
                        v-if="ques.result"
                        class="right_no"
                      ></el-button>
                      <el-button
                        type="danger"
                        icon="el-icon-close"
                        circle
                        size="mini"
                        v-if="!ques.result"
                        class="right_no"
                      ></el-button>
                    </div>
                    <div class="answer">答案：</div>
                    <p v-if="ques.answer === 'yes'">正确</p>
                    <p v-if="ques.answer === 'no'">错误</p>
                  </div>
                </div>
                <div class="xuanxiang" v-if="ques.type === 'xuanze'">
                  <div v-for="(item, index) in ques.items">
                    <span v-if="index === 0">A</span>
                    <span v-if="index === 1">B</span>
                    <span v-if="index === 2">C</span>
                    <span v-if="index === 3">D</span>
                    <span v-if="index === 4">E</span>
                    <span v-if="index === 5">F</span>
                    <span v-if="index === 6">G</span>
                    <span v-if="index === 7">H</span>
                    <span v-if="index === 8">I</span>
                    <span v-if="index === 9">J</span>
                    <span>{{item}}</span>
                  </div>
                </div>
                <div v-if="ques.type === 'xuanze'">
                  <div class="column">
                    <div class="my_answer">我的答案：</div>
                    <div class="flex-row">
                      <p v-for="ans in ques.stu_answer[0]">
                        <span style="margin-right:5px">{{"ABCDEFGHIJKLMNOPQRSTUVWXYZ"[ans-1]}}</span>
                      </p>
                      <el-button
                        type="success"
                        icon="el-icon-check"
                        circle
                        size="mini"
                        v-if="ques.result"
                        class="right_no"
                      ></el-button>
                      <el-button
                        type="danger"
                        icon="el-icon-close"
                        circle
                        size="mini"
                        v-if="!ques.result"
                        class="right_no"
                      ></el-button>
                    </div>
                    <div class="answer">答案：</div>
                    <div class="flex-row">
                      <p v-for="ans in ques.answer">
                        <span style="margin-right:5px">{{"ABCDEFGHIJKLMNOPQRSTUVWXYZ"[ans-1]}}</span>
                      </p>
                    </div>
                  </div>
                </div>
                <div v-if="ques.type === 'jianda'">
                  <div class="my_answer">我的答案：</div>
                  <div class="left" v-html="ques.stu_answer[0]"></div>
                  <div class="answer">答案：</div>
                  <div>言之有理即可</div>
                </div>
                <Divider />
                <div class="left" v-if="ques.illustrationContent !== ''">
                  <div class="my_answer">答案解析：</div>
                  <div class="left" v-html="ques.illustrationContent"></div>
                </div>
              </div>
            </Card>
          </div>
          <div v-for="(ques,index) in homework_question" class="card_row">
            <Card style="width:1000px;margin-bottom: 20px">
              <div class="ques_content">
                <div class="left" v-html="ques.question"></div>
                <Divider />
                <div v-if="ques.type === 'panduan'">
                  <div class="column">
                    <div class="my_answer">我的答案：</div>
                    <div>
                      <p v-if="ques.stu_answer[0] === 'yes'">正确</p>
                      <p v-if="ques.stu_answer[0] === 'no'">错误</p>
                      <el-button
                        type="success"
                        icon="el-icon-check"
                        circle
                        size="mini"
                        v-if="ques.result"
                        class="right_no"
                      ></el-button>
                      <el-button
                        type="danger"
                        icon="el-icon-close"
                        circle
                        size="mini"
                        v-if="!ques.result"
                        class="right_no"
                      ></el-button>
                    </div>
                    <div class="answer">答案：</div>
                    <p v-if="ques.answer[0] === 'yes'">正确</p>
                    <p v-if="ques.answer[0] === 'no'">错误</p>
                  </div>
                </div>
                <div class="xuanxiang" v-if="ques.type === 'xuanze'">
                  <div v-for="(item, index) in ques.items">
                    <span v-if="index === 0">A</span>
                    <span v-if="index === 1">B</span>
                    <span v-if="index === 2">C</span>
                    <span v-if="index === 3">D</span>
                    <span v-if="index === 4">E</span>
                    <span v-if="index === 5">F</span>
                    <span v-if="index === 6">G</span>
                    <span v-if="index === 7">H</span>
                    <span v-if="index === 8">I</span>
                    <span v-if="index === 9">J</span>
                    <span>{{item}}</span>
                  </div>
                </div>
                <div v-if="ques.type === 'xuanze'">
                  <div class="column">
                    <div class="my_answer">我的答案：</div>
                    <div>
                      <p v-for="ans in ques.stu_answer[0]">
                        <span v-if="ans === '1'">A</span>
                        <span v-if="ans === '2'">B</span>
                        <span v-if="ans === '3'">C</span>
                        <span v-if="ans === '4'">D</span>
                        <span v-if="ans === '5'">E</span>
                        <span v-if="ans === '6'">F</span>
                        <span v-if="ans === '7'">G</span>
                        <span v-if="ans === '8'">H</span>
                        <span v-if="ans === '9'">I</span>
                        <span v-if="ans === '10'">G</span>
                      </p>
                      <el-button
                        type="success"
                        icon="el-icon-check"
                        circle
                        size="mini"
                        v-if="ques.result"
                        class="right_no"
                      ></el-button>
                      <el-button
                        type="danger"
                        icon="el-icon-close"
                        circle
                        size="mini"
                        v-if="!ques.result"
                        class="right_no"
                      ></el-button>
                    </div>
                    <div class="answer">答案：</div>
                    <p v-for="ans in ques.answer">
                      <span v-if="ans === '1'">A</span>
                      <span v-if="ans === '2'">B</span>
                      <span v-if="ans === '3'">C</span>
                      <span v-if="ans === '4'">D</span>
                      <span v-if="ans === '5'">E</span>
                      <span v-if="ans === '6'">F</span>
                      <span v-if="ans === '7'">G</span>
                      <span v-if="ans === '8'">H</span>
                      <span v-if="ans === '9'">I</span>
                      <span v-if="ans === '10'">J</span>
                    </p>
                  </div>
                </div>
                <div v-if="ques.type === 'jianda'">
                  <div class="my_answer">我的答案：</div>
                  <div class="left" v-html="ques.stu_answer[0]"></div>
                  <div class="answer">答案：</div>
                  <div>言之有理即可</div>
                </div>
                <Divider />
                <div class="left" v-if="ques.illustrationContent !== ''">
                  <div class="my_answer">答案解析：</div>
                  <div class="left" v-html="ques.illustrationContent"></div>
                </div>
              </div>
            </Card>
          </div>
        </div>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import header from "../components/header.vue";
import { getQandAlist } from "../api/api";
export default {
  name: "homeworkAnswer",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "scroll"
      },
      seq: "",
      homework_point: [],
      homework_question: []
    };
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("homework_seq")) != null) {
      this.seq = JSON.parse(sessionStorage.getItem("homework_seq")).seq;
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        let content_top = document.getElementById("content").offsetTop;
        this.bg.height = `${window.innerHeight - content_top}px`;
        this.bg.width = `${window.innerWidth}px`;
      })();
    };
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
    let content_top = document.getElementById("content").offsetTop;
    this.bg.height = `${window.innerHeight - content_top}px`;
    let json = {};
    json = {
      UUID: this.$store.state.UUID,
      seq: this.seq
    };
    getQandAlist({
      UUID: this.$store.state.UUID,
      seq: this.seq
    })
      .then(response => {
        if (response.state === true) {
          this.homework_point = response.point_list;
          this.homework_question = response.question_list;
        } else {
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
  },
  destroyed() {
    window.removeEventListener("popstate", this.goBack, false);
  },
  components: {
    myheader: header
  },
  methods: {
    goBack() {
      this.$router.replace({ path: "homework" });
      //replace替换原路由，作用是避免回退死循环
    }
  }
};
</script>
